<template>
  <div class="empty">
    <img :class="{ img: size === 'large', 'img-small': size === 'small' }" src="@/assets/images/empty.png" alt="">
    <div class="text">{{ content }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  content: {
    type: String,
    default: '暂无相关内容'
  },
  size: {
    type: String,
    default: 'large'
  }
})

</script>

<style lang="scss" scoped>
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
}
.img {
  width: 360px;
  height: 240px;
}
.img-small {
  width: 240px;
  height: 160px;
}
.text {
  font-size: 16px;
  margin-top: 30px;
  color: #bebebe;
}
</style>
